<template>
  <div id="processWrapper">
    <ul>
      <div class="flow-line"></div>
      <template v-for="(item, index) in processList">
        <!-- <a-popconfirm -->
        <a-popover
          title="编辑"
          trigger="click"
          placement="rightTop"
          :key="index"
          @visibleChange="handleVisibleChange"
          :visible="confirmVisible[index]"
          :getPopupContainer="getBox"
        >
          <!-- <template slot="title"> -->
          <template slot="content">
            <div>
              <a-input type="text" v-model="item.nodeLabel" />
              <a-input type="text" v-model="item.nodeName" @click="onSelectUser" />
            </div>
            <div class="closeBtn" @click="onClose(index)"><a-icon type="close" /></div>
          </template>
          <li @click="onEdit(index)" :class="{ addCursor: isEdit }">
            <div class="delBtn" :class="{ delBtnShow: isEdit }" @click.stop="onDelete(index)">
              <a-icon type="delete" theme="outlined" />
            </div>
            <span class="index">{{ index + 1 }}</span>
            <span class="nodeLabel">{{ item.nodeLabel }}</span>
            <span class="nodeName">{{ item.nodeName }}</span>
          </li>
        </a-popover>
        <!-- </a-popconfirm> -->
      </template>
      <a-button v-show="isEdit" type="dashed" block @click="onAdd">+ 添加</a-button>
    </ul>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'ProcessNode',
    props: {
      // 流程数据
      processList: {
        type: Array,
        default: () => [],
      },
      // 是否编辑
      isEdit: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        confirmVisible: {},
        itemIndex: '',
      }
    },
    created() {},
    computed: {
      ...mapState('business', {
        nodeName: state => state.nodeName,
      }),
    },
    watch: {
      nodeName(value) {
        this.processList[this.itemIndex].nodeName = value
      },
    },
    mounted() {},
    methods: {
      getBox() {
        return document.getElementById('processWrapper')
      },
      onAdd() {
        // this.$emit('addItem')
        this.processList.push({
          nodeLabel: '第' + (this.processList.length + 1) + '级审批',
          nodeName: '审批人',
        })
      },
      onEdit(index) {
        this.itemIndex = index
      },
      onDelete(index) {
        let _this = this
        _this.$confirm({
          title: '确认删除当前流程节点？',
          okText: '确定',
          cancelText: '取消',
          zIndex: '10000',
          onOk() {
            _this.processList.splice(index, 1)
          },
        })
      },
      onSelectUser() {
        this.$emit('showPop')
      },
      onClose() {
        this.$set(this.confirmVisible, this.itemIndex, false)
      },
      handleVisibleChange() {
        if (this.isEdit) {
          for (let key in this.confirmVisible) {
            this.$set(this.confirmVisible, key, false)
          }
          this.$set(this.confirmVisible, this.itemIndex, true)
        }
      },
      // 获取编辑后的流程节点数据
      getProcessNode() {
        return this.processList
      },
    },
  }
</script>

<style lang="less">
  // 要改变第三方UI组件的样式，不能用scoped
  #processWrapper {
    // 加根目录类，避免造成全局污染
    .fl {
      float: left;
    }
    ul {
      position: relative;
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 376px;
      .flow-line {
        border-left: 1px dashed #e2e2e2;
        position: absolute;
        top: 43px;
        margin-top: 10px;
        bottom: 0px;
        left: 34px;
        width: 0;
      }
      .addCursor:hover {
        border: 1px solid #40a9ff;
        cursor: pointer;
        display: block;
      }
      li:hover .delBtnShow {
        display: block;
      }
      li:hout .delBtnShow {
        display: none;
      }
      li {
        position: relative;
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        margin-bottom: 30px;
        span {
          color: #000;
          font-size: 14px;
          display: inline-block;
          line-height: 64px;
        }
        .delBtn {
          display: none;
          position: absolute;
          right: 10px;
          top: -16px;
          border: 1px solid #ccc;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          background-color: #fff;
          i {
            padding: 7px;
          }
        }
        .delBtn:hover {
          border: 1px solid #40a9ff;
          cursor: pointer;
        }
        .index {
          width: 60px;
          height: 64px;
          // border-radius: 4px;
          background-color: #e8e8e8;
          text-align: center;
        }
        .nodeLabel {
          width: 243px;
          padding-left: 10px;
          color: #333333;
        }
        .nodeName {
          text-align: right;
          width: 70px;
          color: #676767;
          padding-right: 12px;
        }
      }
      .ant-btn-dashed {
        height: 64px;
        float: left;
      }
      .title {
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
      }
    }
    .closeBtn {
      position: absolute;
      top: 0;
      right: 12px;
      width: 16px;
      height: 25px;
      font-size: 20px;
      cursor: pointer;
    }
    //
    .ant-input {
      display: block;
      width: 180px;
      margin: 5px 0;
    }
    .ant-input:last-child {
      margin-top: 15px;
    }
    .ant-popover-buttons {
      display: none;
    }
    // .ant-popover-inner-content {
    //   padding-bottom: 0;
    // }
  }
</style>
